@charset "utf-8";
$font-size:64px;
html{
    font-size: 64px;
}
@function r($px){
    @return $px/$font-size*1rem;
}
.article-detail-box{
    position: absolute;
    top: r(90px);
    width: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    bottom: r(95px);
    -webkit-overflow-scrolling: touch;
    z-index: 1;
    background: #FFFFFF;
    opacity: 0;
    transition: .5s all ease-out;
    transform: translateX(100%);
    .article-detail{
        width: 100%;
        padding: r(42px) r(32px) 0 r(27px);
        font-size: 0;
        h2{
            font-size: 17px;
            padding-bottom: r(15px);
        }
        .sl{
            width: 100%;
            text-align: right;
            a{
                color: #c5c5c5;
                &:nth-of-type(2){
                    padding-left: r(44px);
                }
                span{
                    padding-left: r(6px);
                }
            }
        }
        .rq{
            width:100%;
            text-align: right;
            font-size: 0;
            span{
                font-size: 18px;
                &:nth-of-type(2){
                    color: #B20000;
                    padding-left: r(17px);
                }
            }
        }
        .abstract{
            width:100%;
            font-size: 0;
            padding-bottom: r(36px);
            p{
                font-size: 12px;
                text-indent: r(41px);
                display: -webkit-box;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 5;
                -webkit-box-orient: vertical;
                color: #8b8b8b;
            }
        }
        .internet{
            width: 100%;
            font-size: 0;
            .h1{
                font-size: 14px;
                text-indent: r(43px);
                margin-bottom: r(36px);
            }
            .p1{
                text-indent: r(36px);
                font-size: 12px;
                color: #8b8b8b;
                display: -webkit-box;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 6;
                -webkit-box-orient: vertical;
                margin-bottom: r(36px);
                &:nth-of-type(2){
                    margin-bottom: r(15px);
                }
            }
            .article-img{
                width: 100%;
                height: r(270px);
                margin-bottom: r(31px);
                img{
                 width: 100%;   
                }
            }
            .article-img2{
                width: 100%;
                height: r(167px);
                img{
                 width: 100%;   
                }
            }
            .p2{
                text-indent: r(40px);
                font-size: 10px;
                color: #8b8b8b;
                display: -webkit-box;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 6;
                -webkit-box-orient: vertical;
            }
        }
        .strategy{
            width: 100%;
            font-size: 0;
            .h2{
                font-size:14px;
                text-indent: r(41px);
            }
            .p3{
                text-indent: r(44px);
                font-size:10px;
                display: -webkit-box;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                color: #8b8b8b;
            }
            .article-img3{
                width: 100%;
                height: r(274px);
                padding-top: r(27px);
                img{
                    width: 100%;
                    height: 100%;
                }
                &:nth-of-type(2){
                    height: r(170px);
                }
                &:nth-of-type(3){
                    height: r(241px);
                }
                &:nth-of-type(4){
                    height: r(299px);
                }
                &:nth-of-type(5){
                    height: r(277px);
                    padding-bottom: r(50px);
                }
            }
            .h4{
                width: 100%;
                font-size: 14px;
                padding-top: r(31px);
            }
            .p4{
                padding:r(36px) 0;
                text-indent: r(13px);
                font-size:10px;
                display: -webkit-box;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                color: #8b8b8b;
            }
            .p5{
                font-size: 10px;
                color: #8b8b8b;
                display: -webkit-box;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 4;
                -webkit-box-orient: vertical;
            }
            .p6{
                
                padding-top: r(36px);
                padding-bottom: r(22px);
                font-size: 10px;
                color: #8b8b8b;
                display: -webkit-box;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 4;
                -webkit-box-orient: vertical;
            }
            .p7{
                padding-top: r(26px);
                font-size: 10px;
                color: #8b8b8b;
                display: -webkit-box;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
            .p8{
                padding-top: r(36px);
                font-size: 10px;
                color: #8b8b8b;
                display: -webkit-box;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
        }
    }
    .posts-box{
        width: 100%;
        border-top: 19px solid #efefef;
        border-bottom: 19px solid #efefef;
        .posts{
            width: 100%;
            padding: r(30px) r(29px) r(28px) r(29px);
            font-size: 0;
            h3{
                display:inline-block;
                font-size:18px;
                font-weight: bold;
                color: #727171;
            }
            a{
                display: inline-block;
                font-size: 16px;
                padding-left: r(17px);
                color: #727171;
            }
        }
    }
    .comment-box{
        widows: 100%;
        .comment{
            width: 100%;
            padding-left: r(28px);
            padding-right:r(29px);
            padding-top: r(38px);
            padding-bottom: r(50px);
            text-align: center;
            font-size: 0;
            .dz{
                width: r(72px);
                height: r(100px);
                display: inline-block;
                margin-right: r(55px);
                &:nth-of-type(3){
                    margin-right: 0;
                }
                div{
                    border: r(1px) solid #8b8b8b;
                    border-radius: 50%;
                    width: r(72px);
                    height: r(72px);
                    text-align: center;
                    a{
                        color: #C5C5C5;
                        display: inline-block;
                        vertical-align: middle;
                        padding-top: r(20px);
                    }
                }
                
                span{
                    font-size: 16px;
                    color: #8B8B8B;
                }
            }
        }
    }
    .comment-from{
        widows: 100%;
        padding-left: r(28px);
        padding-right:r(29px);
        .comment-login{
            width: 100%;
            border: 1px solid #c9c9c9;
            height: r(191px);
            font-size: 0;
            text-align: center;
            padding-top: r(78px);
            a{
                color: #B20000;
                text-decoration: underline;
                font-size: 16px;
            }
            span{
                font-size: 16px;
                color: #8b8b8b;
            }
        }
        .fb{
            width: 100%;
            text-align: center;
            font-size: 0;
            padding-top: r(16px);
            padding-bottom: r(50px);
            a{
                width: r(395px);
                height: r(53px);
                background: #b20000;
                text-align: center;
                color: #FFFFFF;
                font-size: 18px;
                display: inline-block;
                vertical-align: middle;
                line-height: r(53px);
            }
        }
        .comment-text-box{
            width: 100%;
            .comment-text{
                h3{
                    font-size: 18px;
                    font-weight: normal;
                    color: #9c9b9b;
                    padding-bottom: r(26px);
                    span{
                        text-decoration: underline;
                        padding: 0 r(5px);
                    }
                }
                li{
                    .user-message{
                        align-items: center;
                        width: 100%;
                        >p{
                            display: inline-block;
                            font-size:14px;
                            vertical-align: middle;
                            margin-right: r(10px);
                        }
                        >span{
                            color: #b2b2b2;
                            font-size: 14px;
                        }
                    }
                    .headimg{
                            overflow: hidden;
                            width:r(50px);
                            height: r(50px);
                            margin-right: r(11px);
                            display: flex;
                            img{
                                border-radius: 50%;
                                width:100%;
                                height: 100%;
                            }
                        }
                    .size2{
                        width: r(40px);
                        height: r(40px);
                        vertical-align: middle;
                    }
                    .user-text{
                        justify-content: space-between;
                        padding: 0 r(18px);
                        margin-top: r(12px);
                        p{
                            font-size: 13px;
                        }
                        .user-time{
                            color:#B2B2B2;
                            font-size: 13px;
                        }
                    }
                    .reply{
                        padding: 0 r(18px);
                        font-size: 13px;
                        p{
                            text-align: right;
                            padding-top: r(20px);
                            padding-bottom: r(5px);
                        }
                        .reply-area{
                            padding: r(19px) r(9px) r(13px) r(21px);
                            background: #fafafa;
                            border-bottom: 1px dashed #c9c9c9;
                            .area{
                                display: flex;
                                align-content: stretch;
                                p{
                                    display: inline-block;
                                    vertical-align: middle;
                                    padding: 0;
                                    line-height: 23px;
                                }
                            }
                            .reply-text{
                                display: -webkit-box;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                -webkit-line-clamp: 2;
                                -webkit-box-orient: vertical;
                                line-height: 23px;
                                padding-left: r(20px);
                            }
                        }
                        .time-data{
                                text-align: right;
                                color: #b2b2b2;
                            }
                        .publish{
                            background: #FAFAFA;
                            padding: r(21px) r(19px) r(10px) r(19px);
                            text-align: right;
                            border-bottom: 1px dashed #C9C9C9;
                            margin-bottom: r(26px);
                            form{
                                textarea{
                                    width: 100%;
                                    height: r(72px);
                                    border: 1px solid #efefef;
                                    resize: none;
                                    padding: r(5px);
                                }
                                a{
                                    display: inline-block;
                                    width: r(174px);
                                    height: r(45px);
                                    background:#B20000;
                                    color: #FFFFFF;
                                    text-align: center;
                                    line-height: r(45px);
                                    margin-top: r(11px);
                                }
                            }
                        }
                    }
                }
            }
        }
        .load{
                width: 100%;
                padding: r(19px) r(30px) r(33px) r(29px);
                text-align: center;
                border-top: 1px solid #e6e6e6;
                a{
                    display:block;
                    color:#bbbbbb;
                    font-size:22px;
                }
            }
    }
}
.flex{
    display: flex;
}
.display-no{
    display: none;
}
.article_on{
    opacity: 1;
    width: 100%;
    transform: translateX(0); 
}